<template>
  <div style="background: #fff; height: 100%">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <span>个人信息</span>
          </template>
          <div class="card_body">
            <div style="text-align: center; margin-bottom: 20px">
              <el-upload
                style="position: relative"
                class="avatar-uploader"
                action="/api/admin/sysUser/updateAvatar"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers=uploadHeader
              >
                <img
                  v-if="userInfo.avatar"
                  :src="userInfo.avatar"
                  class="avatar"
                />
                <div class="mask_box">
                  <el-icon class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </div>
              </el-upload>
            </div>
            <div class="info_column">
              <div>用户名：</div>
              <div>{{ userInfo.username }}</div>
            </div>
            <div class="info_column">
              <div>姓名：</div>
              <div>{{ userInfo.name }}</div>
            </div>
            <div class="info_column">
              <div>手机号：</div>
              <div>{{ userInfo.phone }}</div>
            </div>
            <div class="info_column">
              <div>性别：</div>
              <div>{{ userInfo.sex === 1 ? "男" : "女" }}</div>
            </div>
            <div class="info_column">
              <div>部门：</div>
              <div>{{ userInfo.deptName }}</div>
            </div>
            <div class="info_column">
              <div>角色：</div>
              <div>{{ userInfo.roleName }}</div>
            </div>
            <div class="info_column">
              <div>岗位：</div>
              <div>{{ userInfo.jobName }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card" id="updatePassword">
          <template #header>
            <span>修改密码</span>
          </template>
          <el-form
            ref="form"
            :model="updatePasswordForm"
            :rules="rules"
            label-width="120px"
            status-icon
          >
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="updatePasswordForm.oldPassword" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="updatePasswordForm.newPassword" />
            </el-form-item>
            <el-form-item label="确认密码" prop="againPassword">
              <el-input v-model="updatePasswordForm.againPassword" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updatePassword()"
                >修改</el-button
              >
              <el-button type="warning" @click="updatePasswordForm = {}"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { updatePassword } from "@/api/admin/SysUserApi.js";
import { getToken } from "@/util/store.js";
export default {
  data() {
    return {
      uploadHeader:{},
      rules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        againPassword: [
          {
            validator: this.againPasswordValidate,
            required: true,
            trigger: "blur",
          },
        ],
      },
      updatePasswordForm: {
        oldPassword: "",
        newPassword: "",
        againPassword: "",
      },
      userInfo: {},
    };
  },
  created() {
    this.$store.dispatch("GetUserInfo").then((res) => {
      this.userInfo = res;
    });
  },
  methods: {
    handleAvatarSuccess(response, file, fileList){
      this.userInfo.avatar = response.data
    },
    updatePassword() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = this.$loading({
            target: document.querySelector("#updatePassword"),
            text: "正在修改中...",
          });
          updatePassword(this.updatePasswordForm)
            .then((res) => {
              if (res.data.code === 200) {
                this.$message.success("修改成功");
                this.$store.dispatch("LogOut").then(() => {
                  this.$router.push("/login");
                });
              }
              loadingInstance.close();
            })
            .catch((error) => {
              loadingInstance.close();
            });
        }
      });
    },
    againPasswordValidate(rule, value, callback) {
      if (value !== this.updatePasswordForm.newPassword) {
        callback(new Error("两次输入密码不一致"));
      } else if (!value) {
        callback(new Error("请输入确认密码"));
      } else {
        callback();
      }
    },
  },
};
</script>
<style scoped lang="scss">
.avatar,
.avatar-uploader {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.avatar-uploader:hover .mask_box {
  display: flex;
}

.mask_box {
  position: absolute;
  width: 120px;
  height: 120px;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  z-index: 999;
  color: #fff;
  display: none;
}

.card_body {
  padding: 15px;
  box-sizing: border-box;
}

.info_column {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f5f5f5;
  padding: 10px;
}
</style>
